<template>
  <div id="_tables">
    <el-table v-bind:data="orderList" :default-expand-all="true" class="parentTable"
              ref="multipleTable"
              v-loading="loading"
              element-loading-text="拼命加载中">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div class="conWrap"
               style="text-align: left;line-height: 16px;font-size: 14px;position: relative;top: -10px;">
            <span style="margin-left:42px;">{{ props.row.createTime }}</span> &nbsp;&nbsp;
            <span>订单号：{{ props.row.orderSn }}</span>&nbsp;&nbsp;&nbsp;
            <span>店铺：{{ props.row.orderItems[0].merchantName }}</span>

          </div>
          <el-table v-bind:data="props.row.orderItems" :default-expand-all="true" stripe :show-header="false"
                    class="childTable">
            <el-table-column prop="spuName" align="center"
                             label="宝贝"
                             width="130">
              <template slot-scope="scope">
                <img :src="scope.row.skuPic" height="120">
              </template>
            </el-table-column>
            <el-table-column prop="spuName" align="center"
                             label="宝贝"
                             width="180">
              <template slot-scope="scope">
                <div class="name-b">{{ scope.row.spuName }}</div>
                <div></div>
              </template>
            </el-table-column>
            <el-table-column prop="Mfg"
                             label="单价" width="100">
              <template slot-scope="scope">
                <div class="name-b">￥{{ scope.row.skuPrice }}.00</div>
              </template>
            </el-table-column>
            <el-table-column prop="Package"
                             label="数量" width="55">
              <template slot-scope="scope">
                <div class="name-b">{{ scope.row.skuQuantity }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="miaoshu"
                             label="实付款" width="140">
              <template slot-scope="scope">
                <div class="name-b" style="width:100%;">￥{{ scope.row.skuPrice * scope.row.skuQuantity }}.00</div>
                <div>(含运费：￥0.00)</div>
              </template>
            </el-table-column>
            <el-table-column prop="ProductNum" align="center" width="120"
                             label="交易状态">
              <template slot-scope="scope">
                <span v-if="props.row.status == 0">待付款</span>
                <span v-if="props.row.status == 1">待发货 </span>
                <span v-if="props.row.status == 2">已发货 </span>
                <span v-if="props.row.status == 3">已完成 </span>
                <span v-if="props.row.status == 4">已关闭</span>
                <span v-if="props.row.status == 5">无效订单</span>
                <div>
                  <el-link target="_blank" @click="toOrderItem(props.row.orderSn)">订单详情</el-link>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="maxNum"
                             label="交易操作">
              <template slot-scope="scope">
                <div>
                <span v-if="props.row.status == 0">
                  <el-button type="danger">立即付款</el-button>
                  <div>取消订单</div>
                </span>
                </div>
                <div>
                  <span v-if="props.row.status == 1 || props.row.status == 2">
                  <el-button type="danger" @click="handleRefund(scope.row)">去退款</el-button>
                </span>
                </div>
                <div>
                  <span v-if="props.row.status == 3">
                    <el-button>确认收货</el-button>
                    <el-button type="warning" @click="openComment(scope.row)">评价</el-button>
                    <el-dialog :visible.sync="dialogVisible" width="30%">
                      <el-input placeholder="请输入商品评价内容" v-model="proComment" clearable></el-input>
                      <span slot="footer" class="dialog-footer">
                        <el-button type="danger" @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addProComment" >发布评价</el-button>
                      </span>
                    </el-dialog>

                </span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>

      </el-table-column>
      <el-table-column label="宝贝" align="center" width="275"></el-table-column>
      <el-table-column label="单价" width="68"></el-table-column>
      <el-table-column label="数量" width="50"></el-table-column>
      <el-table-column label="实付款" align="center" width="165"></el-table-column>
      <el-table-column label="交易状态" width="80"></el-table-column>
      <el-table-column label="交易操作" align="center" width="200"></el-table-column>
    </el-table>

    <div id="pageInfo">
      <el-pagination

          align="center"
          style="margin: 20px"
          background
          layout="prev, pager, next"

          @current-change="changePageNum"
          @prev-click="nextPageNum(-1)"
          @next-click="nextPageNum(1)"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="商品图片:" prop="skuPic"/>
        <img style="width:200px;height:140px" :src="form.skuPic"/>
        <el-form-item label="商品品牌:" prop="spuBrand">
          {{ form.spuBrand }}
        </el-form-item>
        <el-form-item label="商品名称:" prop="spuName">
          {{ form.spuName }}
        </el-form-item>
        <el-form-item label="购买数量:" prop="skuQuantity">
          {{ form.skuQuantity }}
        </el-form-item>
        <el-form-item label="总金额:" prop="skuPrice">
          {{ form.skuPrice }}
        </el-form-item>
        <el-form-item label="退货原因:" prop="reason">
          <el-input v-model="form.reason" placeholder="退货原因" style="width: 300px"/>
        </el-form-item>
        <el-form-item label="描述:" prop="description">
          <el-input type="textarea" v-model="form.description" style="width: 700px" rows="4"/>
        </el-form-item>
        <el-form-item label="图片凭证:" prop="descPics">
          <el-upload
              action="http://localhost:9000/api/upload/upload"
              list-type="picture-card"
              name="multipartFile"
              :headers="headers"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="successImg">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import Detail from "@/pages/Detail";
import {getToken} from "@/utils/setToken";


export default {
  // components: {Detail},
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      orderList: [],
      title: "退货信息",
      // 是否显示弹出层
      open: false,
      pageNum: 1,
      total: 0,
      selectSkuId: "",
      queryParam: {
        pageNum: 1,
        pageSize: 6
      },
      // 表单参数
      form: {
        orderSn: '',
        skuId: '',
        skuPic: '',
        spuBrand: '',
        reason: '',
        spuName: '',
        skuQuantity: '',
        skuPrice: '',
        description: '',
        descPics: ''
      },
      rules: {
        reason: [{required: true, message: "退货原因必填！", trigger: "blur"},],
      },
      fileList: [],
      headers: {
        'Authorization': 'Bearer ' + getToken()
      },
      proComment: '',
    }
  },
  methods: {
    rest() {
      this.form.orderSn = null,
          this.form.skuId = null,
          this.form.skuPic = null,
          this.form.spuBrand = null,
          this.form.reason = null,
          this.form.spuName = null,
          this.form.skuQuantity = null,
          this.form.skuPrice = null,
          this.form.description = null,
          this.fileList = []
    },
    cancel() {
      this.open = false;
      this.rest()
    },
    submitForm() {
      this.form.descPics = '',
          console.log(this.form.descPics)
      for (const argumentsKey in this.fileList) {
        this.form.descPics += argumentsKey + ","
      }
      console.log(this.form.descPics)
      axios({
        url: '/api/order/omsOrderReturnApply/oms/refund',
        method: 'post',
        data: {
          orderSn: this.form.orderSn,
          skuId: this.form.skuId,
          skuPic: this.form.skuPic,
          spuBrand: this.form.spuBrand,
          reason: this.form.reason,
          spuName: this.form.spuName,
          skuQuantity: this.form.skuQuantity,
          skuPrice: this.form.skuPrice,
          description: this.form.description,
          descPics: this.form.descPics,

        }
      }).then(response => {
        this.$message.success("已提交");
        this.open = false;
        this.rest()
        this.fileList = []
      })
    },
    successImg(response, file, fileList) {
      this.fileList.push(response)
      console.log(this.fileList)
    },
    handleRemove(file, fileList) {
      console.log(JSON.stringify(file) + "---")
      let index = this.fileList.findIndex(obj => {
        return obj === file;
      })
      this.fileList.splice(index, 1);
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRefund(row) {
      this.open = true
      this.form.skuId = row.skuId
      this.form.orderSn = row.orderSn
      this.form.skuPic = row.skuPic
      this.form.spuName = row.spuName
      this.form.skuPrice = row.skuPrice
      this.form.skuQuantity = row.skuQuantity
      this.form.spuBrand = row.spuBrand

    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    queryOrderList() {
      console.log(this.pageNum)
      axios({
        url: '/api/order/omsOrder/oms/queryOrderByOrderItem',
        method: 'get',
        params: {
          pageNum: this.queryParam.pageNum,
          pageSize: 6
        }
      }).then(response => {
        console.log(response)
        this.orderList = []
        this.orderList = response.rows;

        this.total = response.total;
      })
    },
    changePageNum(page) {
      this.queryParam.pageNum = page;
      this.queryOrderList();
    },
    nextPageNum(page) {
      this.queryParam.pageNum += page;
      this.queryOrderList();
    },
    toOrderItem(orderSn) {
      this.$router.push("/center/orderItem?orderSn=" + orderSn);

    },
    //商品评价
    addProComment(){
      if (this.proComment == '' || this.proComment == null){
        alert("评价内容不能为空")
        return;
      }
      axios({
        url: '/pms/pmsSpuComment/addProComment',
        method: 'post',
        data: {
          skuId: this.selectSkuId,
          proComment: this.proComment,
        }
      }).then(response => {

      })
      this.dialogVisible = false;
      this.proComment = '';
      this.selectSkuId = '';
    },
    openComment(row){
      this.dialogVisible = true
      console.log(row)
      this.selectSkuId = row.skuId
    }
  },
  created() {
    this.queryOrderList();
  }
};

</script>

<style scoped>
#pageInfo {

}

#_tables {
  position: relative;
  top: -1300px;
  width: 80%;
  float: right;
}
</style>
